import React from 'react'
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile'
import axios from 'axios'
import { getCity } from '../../utils/index'
import nav1 from '../../assets/images/nav-1.png'
import nav2 from '../../assets/images/nav-2.png'
import nav3 from '../../assets/images/nav-3.png'
import nav4 from '../../assets/images/nav-4.png'
import './index.scss'

export default class Index extends React.Component {
  state = {
    swiper: [],
    groups: [],
    news: [],
    cityName: '济南',
  }

  navs = [{
    id: 0,
    img: nav1,
    title: '整租',
    path: '/home/list'
  }, {
      id: 1,
      img: nav2,
      title: '合租',
      path: '/home/list'
  }, {
      id: 2,
      img: nav3,
      title: '地图找房',
      path: '/home/map'
  }, {
      id: 3,
      img: nav4,
      title: '去出租',
      path: '/home/list'
  }]

  async getSwiperList() {
    const {data} = await axios.get('http://127.0.0.1:8080/home/swiper')

    if(data.status !== 200) {
      return 
    }

    this.setState({
      swiper: data.body,
    })
  }

  async getGroupList() {
    const {data} = await axios.get('http://127.0.0.1:8080/home/groups', {
      params: { area: 'AREA|88cff55c-aaa4-e2e0' }
    })

    if(data.status !== 200) {
      return 
    }

    this.setState({
      groups: data.body
    })
  }

  async getNewsList() {
    const {data} = await axios.get('http://127.0.0.1:8080/home/news', {
      params: { area: 'AREA|88cff55c-aaa4-e2e0' }
    })

    if(data.status !== 200) {
      return 
    }

    this.setState({
      news: data.body
    })
  }

  async getCityName() {
    const data = await getCity()
    this.setState({
      cityName: data.label
    })
  } 

  componentDidMount() {
    this.getSwiperList() 
    this.getGroupList() 
    this.getNewsList() 
    this.getCityName()
  }

  renderSwiper() {
    return (
      <div style={ {height: 212} }>
        { this.state.swiper.length > 0 ? <Carousel
          autoplay
          infinite
          dots
        >
          { this.state.swiper.map(item => (
            <a
              key={item.id}
              href="http://itcast.cn"
              style={{ display: 'inline-block', width: '100%', height: 212 }}
            >
              <img
                src={`http://127.0.0.1:8080${item.imgSrc}`}
                alt=""
                style={{ width: '100%', verticalAlign: 'top' }}
              />
            </a>
          ))}
        </Carousel> : '' }
      </div>
    )
  }

  renderNavs() {
    return (
      <Flex className="index-nav">
        {this.navs.map(item=> {
          return (
            <Flex.Item key={item.id} onClick={ ()=> this.props.history.push(item.path) }>
              <img src={item.img} alt="" />
              <div>{item.title}</div>
            </Flex.Item>
          )
        })}
      </Flex>
    )
  }

  renderGroupItem(item) {
    return (
      <Flex className="group-item" justify="around">
        <div className="desc">
            <p className="title">{item.title}</p>
            <span className="info">{item.desc}</span>
        </div>
        <img src={`http://localhost:8080${item.imgSrc}`} alt="" />
      </Flex>
    )
  }

  renderGroup() {
    return (
      <div className="group">
        <h3 className="group-title">
          租房小组 <span className="more">更多</span>
        </h3>
        <Grid data={this.state.groups}
          columnNum={2} 
          square={false}
          hasLine={false}
          renderItem={item => this.renderGroupItem(item)} 
        />
      </div>
    )
  }

  renderNewsItem() {
    return this.state.news.map(item => {
      return (
        <div className="news-item" key={item.id}>
          <div className="imgwrap">
            <img
              className="img"
              src={`http://localhost:8080${item.imgSrc}`}
              alt=""
            />
          </div>
          <Flex className="content" direction="column" justify="between">
            <h3 className="title">{item.title}</h3>
            <Flex className="info" justify="between">
              <span>{item.from}</span>
              <span>{item.date}</span>
            </Flex>
          </Flex>
        </div>
      )
    })
  }

  renderNews() {
    return (
      <div className="news">
        <h3 className="group-title">最新资讯</h3>
        <WingBlank size="md">{this.renderNewsItem()}</WingBlank>
      </div>
    )
  }

  renderSearch() {
    return (
      <Flex className='search-box'>
        <Flex className="search">
          <div className="location" onClick={() => this.props.history.push('/citylist')}>
            <span className="name">{this.state.cityName}</span>
            <i className="iconfont icon-arrow" />
          </div>

          <div className="form">
            <i className="iconfont icon-seach" />
            <span className="text">请输入小区或地址</span>
          </div>
        </Flex>
        <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')} />
      </Flex>
    )
  }

  render() {
    return (
      <div>
        {/* 渲染轮播图 */}
        { this.renderSwiper() }

        {/* 渲染导航 */}
        { this.renderNavs() }

        {/* 渲染小组内容 */}
        { this.renderGroup() }

        {/* 渲染新闻内容 */}
        { this.renderNews() }

        {/* 渲染搜索框 */}
        { this.renderSearch() }
      </div>
    )
  }
}
